<template>
  <div>
    <el-form :inline="true" :model="page" class="demo-form-inline">
      <el-form-item label="菜单名称">
        <el-input v-model.trim="page.menuName" clearable placeholder="菜单查询"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="findPage()">查询</el-button>
        <el-button type="primary" @click="onAdd">新建</el-button>
      </el-form-item>
    </el-form>
    <el-table
        :data="this.pageData.records"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        row-key="id"
        border
        default-expand-all
        style="width: 100%">
      <el-table-column
          prop="id"
          label="id"
          width="80">
      </el-table-column>
      <el-table-column
          prop="menuName"
          label="菜单名称"
          width="200">
      </el-table-column>
      <el-table-column
          prop="name"
          label="名称"
          width="200">
      </el-table-column>
      <el-table-column
          prop="path"
          label="路由"
          width="200">
      </el-table-column>
      <el-table-column
          prop="query"
          label="参数"
          width="200">
      </el-table-column>
      <el-table-column
          prop="createTime"
          width="200"
          label="创建时间">
      </el-table-column>
      <el-table-column
          prop="updateTime"
          width="200"
          label="修改时间">
      </el-table-column>
      <el-table-column
          prop="remark"
          width="200"
          label="备注">
      </el-table-column>

      <el-table-column
          fixed="right"
          label="操作"
          width="200">
        <template slot-scope="scope">
          <el-tooltip class="item" v-if="scope.row.id !== 1" effect="dark" content="编辑" placement="top">
            <el-button type="primary" icon="el-icon-edit" @click="updateClick(scope.row)" circle></el-button>
          </el-tooltip>
          <el-tooltip class="item" v-if="scope.row.id !== 1" effect="dark" content="删除" placement="top">
            <el-button type="danger" icon="el-icon-delete" @click="deleteClick(scope.row.id)" circle></el-button>
          </el-tooltip>
        </template>
      </el-table-column>

    </el-table>

    <div style="float: right">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="this.pageData.current"
          :page-size="this.pageData.size"
          layout="total, prev, pager, next"
          :total="this.pageData.total">
      </el-pagination>
    </div>


    <el-dialog
        :title='title'
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">

      <el-form :inline="true" label-position="right" label-width="80px" :model="sysMenu" :rules="rules" ref="sysMenu"
               class="demo-form-inline">

        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="sysMenu.menuName" placeholder="菜单名称"></el-input>
        </el-form-item>

        <el-form-item label="名称" prop="name">
          <el-input v-model="sysMenu.name" placeholder="菜单名称"></el-input>
        </el-form-item>

        <el-form-item label="父级菜单" prop="parentId">
          <!--          <el-input v-model="sysMenu.parentId" placeholder="父级菜单"></el-input>-->

          <el-select v-model="sysMenu.parentId" placeholder="请选择">
            <el-option
                v-for="item in parentSysMenus"
                :key="item.id"
                :label="item.menuName"
                :value="item.id">
            </el-option>
          </el-select>

        </el-form-item>

        <el-form-item label="路由" prop="path">
          <el-input v-model="sysMenu.path" placeholder="路由"></el-input>
        </el-form-item>

        <el-form-item label="参数" prop="query">
          <el-input v-model="sysMenu.query" placeholder="参数"></el-input>
        </el-form-item>

        <el-form-item label="序列" prop="orderNum">
          <el-input v-model="sysMenu.orderNum" placeholder="序列"></el-input>
        </el-form-item>

      </el-form>

      <div style="text-align:center">
        <el-button @click="closeDia()">取 消</el-button>
        <el-button type="primary" @click="onSubmit('sysMenu')">提交</el-button>

      </div>


    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "sysMenu",
  data() {
    return {
      parentSysMenus: [],
      dialogVisible: false,
      title: '新增',
      pageData: {
        records:[],
        total:0,
        size:0,
        current:0,
      },
      page: {
        pageNum: 1,
        pageSize: 10,
        menuName: ''
      },
      sysMenu: {
        id: null,
        menuName: '',
        name: '',
        parentId: 1,
        path: '',
        query: '',
        orderNum: 0,
      },
      rules: {
        menuName: [
          {required: true, message: '请输入菜单名称', trigger: 'blur'},
        ],
        path: [
          {required: true, message: '请输入路由地址', trigger: 'blur'},
        ],
        orderNum: [
          {required: true, message: '请输入index', trigger: 'blur'},
        ],
      }

    }
  },
  methods: {
    deleteClick: function (id) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete("/SysMenu/delete?id=" + id).then((res) => {
          if (res.data.code === '200') {
            this.$message({
              message: res.data.msg,
              type: 'success'
            });
            this.findPage();
            // this.handleClose();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    updateClick: function (sysMenu) {
      this.title = '修改';
      this.sysMenu = {
        id: sysMenu.id,
        menuName: sysMenu.menuName,
        parentId: sysMenu.parentId,
        path: sysMenu.path,
        name: sysMenu.name,
        query: sysMenu.query,
        orderNum: sysMenu.orderNum,
      }
      this.dialogVisible = true;
    },
    handleClose: function (formName) {
      this.dialogVisible = false;
      this.$refs.sysMenu.resetFields();
    },
    onSubmit: function (sysMenu) {
      this.$refs[sysMenu].validate((valid) => {
        if (valid) {
          var url = '';
          if (this.sysMenu.id === null) {
            url = '/SysMenu/insert';
          } else {
            url = '/SysMenu/update';
          }

          this.$http.post(url, this.sysMenu).then((res) => {
            if (res.data.code === '200') {
              this.dialogVisible = false;
              this.$message({
                message: res.data.msg,
                type: 'success'
              });
              this.findPage();
              this.handleClose();
            }
          })
        } else {
          return false;
        }
      })

    },
    findlistByParents: function () {
      this.$http.get('/SysMenu/listByParents').then((res) => {
        this.parentSysMenus = res.data.data;
      })


    },
    closeDia: function () {
      this.findlistByParents();
      this.dialogVisible = false;
      this.sysMenu = {
        id: null,
        menuName: '',
        parentId: 1,
        path: '',
        name: '',
        query: '',
        orderNum: 0,
      }
    },
    onAdd: function () {
      this.findlistByParents();
      this.title = '添加';
      this.sysMenu = {
        id: null,
        menuName: '',
        parentId: 1,
        path: '',
        name: '',
        query: '',
        orderNum: 0,
      }
      this.dialogVisible = true;
    },
    findPage: function () {
      this.$http.get('/SysMenu/listByPage?pageNum=' + this.page.pageNum + '&pageSize=' + this.page.pageSize + '&menuName=' + this.page.menuName).then((res) => {
        this.pageData = res.data.data
      })
    },
    handleSizeChange(val) {
      console.log(`页: ${val}`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.pageNum = val;
      this.findPage();
    }
  }
}
</script>

<style scoped lang="less">

</style>
